<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>资料下载页面</title>
    <link rel="stylesheet" href="../../css/mdui.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script>
        var inst = new mdui.Tab('#tab');
        inst.handleUpdate();
    </script>
</head>

<body class="mdui-appbar-with-toolbar mdui-drawer-body-left mdui-color-grey-50">
    <!-- 顶部导航栏 -->
    <header>
        <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
            <div class="mdui-toolbar mdui-color-deep-purple">
                <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#left-drawer'}"><i class="mdui-icon material-icons">menu</i></a>
                <a href="javascript:;" class="mdui-typo-title">操作系统学习平台</a>
                <div class="mdui-toolbar-spacer"></div>
                <ul class="mdui-list mdui-m-r-2" mdui-menu="{target: '#login-menu'}">
                    <li class="mdui-list-item mdui-ripple">
                        <div class="mdui-list-item-avatar"><img src="https://pic.superbed.cn/item/5cb057333a213b04171e7bdb" /></div>
                        <div class="mdui-list-item-content">刘同学</div>
                        <i class="mdui-icon material-icons">expand_more</i>
                    </li>
                </ul>
                <!-- 小菜单 -->
                <ul class="mdui-menu mdui-menu-cascade" id="login-menu">
                    <li class="mdui-menu-item">
                        <a href="javascript:;" class="mdui-ripple">个人中心</a>
                    </li>
                    <li class="mdui-divider"></li>
                    <li class="mdui-menu-item">
                        <a href="javascript:;" class="mdui-ripple">
                            <i class=" mdui-menu-item-icon mdui-icon material-icons">launch</i>登出
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 顶部导航栏结束 -->


    <div id="tab" class="mdui-tab mdui-tab-centered" mdui-tab>
        <a href="#tab1" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">import_contacts</i>
            <label>优秀报告</label>
        </a>
        <a href="#tab2" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">event</i>
            <label>实验报告</label>
        </a>
        <a href="#tab3" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">description</i>
            <label>课件资料</label>
        </a>
    </div>

    <content>
        <div class="mdui-container">
            <div id="tab1">
                <p></p>
                <div class="mdui-row-xs-3 mdui-grid-list">
                    <div class="mdui-col">
                        <div class="mdui-grid-tile">
                            <img src="https://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/card.jpg" />
                            <div class="mdui-grid-tile-actions">
                                <div class="mdui-grid-tile-text">
                                    <div class="mdui-grid-tile-title">刘同学实验报告</div>
                                    <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">update</i>2019年4月14日16:02:19</div>
                                </div>
                                <div class="mdui-grid-tile-buttons">
                                    <button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mdui-col">
                        <div class="mdui-grid-tile">
                            <img src="https://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/card.jpg" />
                            <div class="mdui-grid-tile-actions">
                                <div class="mdui-grid-tile-text">
                                    <div class="mdui-grid-tile-title">刘同学实验报告</div>
                                    <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">update</i>2019年4月14日16:02:19</div>
                                </div>
                                <div class="mdui-grid-tile-buttons">
                                    <button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mdui-col">
                        <div class="mdui-grid-tile">
                            <img src="https://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/card.jpg" />
                            <div class="mdui-grid-tile-actions">
                                <div class="mdui-grid-tile-text">
                                    <div class="mdui-grid-tile-title">刘同学实验报告</div>
                                    <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">update</i>2019年4月14日16:02:19</div>
                                </div>
                                <div class="mdui-grid-tile-buttons">
                                    <button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mdui-col">
                        <div class="mdui-grid-tile">
                            <img src="https://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/card.jpg" />
                            <div class="mdui-grid-tile-actions">
                                <div class="mdui-grid-tile-text">
                                    <div class="mdui-grid-tile-title">刘同学实验报告</div>
                                    <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">update</i>2019年4月14日16:02:19</div>
                                </div>
                                <div class="mdui-grid-tile-buttons">
                                    <button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mdui-col">
                        <div class="mdui-grid-tile">
                            <img src="https://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/card.jpg" />
                            <div class="mdui-grid-tile-actions">
                                <div class="mdui-grid-tile-text">
                                    <div class="mdui-grid-tile-title">刘同学实验报告</div>
                                    <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">update</i>2019年4月14日16:02:19</div>
                                </div>
                                <div class="mdui-grid-tile-buttons">
                                    <button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mdui-col">
                        <div class="mdui-grid-tile">
                            <img src="https://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/card.jpg" />
                            <div class="mdui-grid-tile-actions">
                                <div class="mdui-grid-tile-text">
                                    <div class="mdui-grid-tile-title">刘同学实验报告</div>
                                    <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">update</i>2019年4月14日16:02:19</div>
                                </div>
                                <div class="mdui-grid-tile-buttons">
                                    <button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mdui-col">
                        <div class="mdui-grid-tile">
                            <img src="https://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/card.jpg" />
                            <div class="mdui-grid-tile-actions">
                                <div class="mdui-grid-tile-text">
                                    <div class="mdui-grid-tile-title">刘同学实验报告</div>
                                    <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">update</i>2019年4月14日16:02:19</div>
                                </div>
                                <div class="mdui-grid-tile-buttons">
                                    <button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mdui-col">
                        <div class="mdui-grid-tile">
                            <img src="https://mdui-aliyun.cdn.w3cbus.com/docs/assets/docs/img/card.jpg" />
                            <div class="mdui-grid-tile-actions">
                                <div class="mdui-grid-tile-text">
                                    <div class="mdui-grid-tile-title">刘同学实验报告</div>
                                    <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">update</i>2019年4月14日16:02:19</div>
                                </div>
                                <div class="mdui-grid-tile-buttons">
                                    <button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '下载文件', position: 'top'}">
                                        <i class="mdui-icon material-icons">cloud_download</i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="tab2">
                <p></p>
                <table class="mdui-table mdui-table-hoverable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>文件名</th>
                            <th>上传人</th>
                            <th>时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>实验报告1</td>
                            <td>刘老师</td>
                            <td>2019年4月14日16:12:01</td>
                            <td>
                                <button class="mdui-btn mdui-btn-icon mdui-ripple" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>实验报告2</td>
                            <td>刘老师</td>
                            <td>2019年4月14日16:12:01</td>
                            <td>
                                <button class="mdui-btn mdui-btn-icon mdui-ripple" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>实验报告3</td>
                            <td>刘老师</td>
                            <td>2019年4月14日16:12:01</td>
                            <td>
                                <button class="mdui-btn mdui-btn-icon mdui-ripple" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="tab3">
                <p></p>
                <table class="mdui-table mdui-table-hoverable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>文件名</th>
                            <th>上传人</th>
                            <th>时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>PPT1</td>
                            <td>刘老师</td>
                            <td>2019年4月14日16:12:01</td>
                            <td>
                                <button class="mdui-btn mdui-btn-icon mdui-ripple" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>PPT2</td>
                            <td>刘老师</td>
                            <td>2019年4月14日16:12:01</td>
                            <td>
                                <button class="mdui-btn mdui-btn-icon mdui-ripple" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>PPT3</td>
                            <td>刘老师</td>
                            <td>2019年4月14日16:12:01</td>
                            <td>
                                <button class="mdui-btn mdui-btn-icon mdui-ripple" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
    </content>

    <!-- 左侧侧边栏 -->
    <aside>
        <!-- 抽屉栏 -->
        <nav class="mdui-drawer mdui-drawer-open " id="left-drawer">
            <ul id="mdui-menu-left-list" mdui-collapse="{accordion: true}" class="mdui-list">
                <a href="../index.html">
                    <li class="mdui-list-item mdui-ripple">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">home</i>
                        <div class=" mdui-list-item-content "> 首页 </div>
                    </li>
                </a>
                <a href="../Homework/index.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-green">event_note</i>
                        <div class="mdui-list-item-content ">作业</div>
                    </li>
                </a>
                <a href="../Chat/index.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-deep-orange">comment</i>
                        <div class="mdui-list-item-content ">交流</div>
                    </li>
                </a>

                <a href="../Exercise/index.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-indigo">chrome_reader_mode</i>
                        <div class="mdui-list-item-content ">习题库</div>
                    </li>
                </a>
                <li class="mdui-subheader ">综合</li>

                <div class="mdui-collapse-item">
                    <li class="mdui-collapse-item-header mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-purple">cloud_download</i>
                        <div class="mdui-list-item-content ">资料下载</div>
                        <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                    </li>
                    <div class="mdui-collapse-item-body mdui-list">
                        <a href="../Datadownload/recommend.html" class="mdui-list-item mdui-ripple ">优秀实验报告</a>
                        <a href="../Datadownload/report.html" class="mdui-list-item mdui-ripple ">实验报告</a>
                        <a href="../Datadownload/courseware.html" class="mdui-list-item mdui-ripple ">课件资料</a>
                    </div>
                </div>

                <a href="../Teaching/index.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">contacts</i>
                        <div class="mdui-list-item-content ">教师评教</div>
                    </li>
                </a>
                <a href="../Answer/index.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-yellow-600">insert_chart</i>
                        <div class="mdui-list-item-content ">疑难点解析</div>
                    </li>
                </a>

            </ul>
        </nav>
    </aside>


    <!-- 底部页脚 -->
    <footer class="mdui-container-fluid mdui-text-center mdui-m-t-2">
        <div class="mdui-bottom-nav">
            <p class="mdui-ripple mdui-container-fluid mdui-valign">Copyright © 2019 北京交通大学海滨学院</p>
        </div>
    </footer>

    <script src="../../js/mdui.js"></script>
    <script>
        var inst = new mdui.Tab('#tab');
        inst.handleUpdate();
    </script>
</body>

</html>